/*
 * @Author: 肖思汗 
 * @Date: 2025-06-27 15:06:36 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-11 23:14:25
 */
import { View } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import { observer } from "mobx-react-lite";
import { useEffect, useState } from 'react';
import PageLayer from 'src/components/PageLayer/PageLayer';
import myPromotionStore from '../MyPromotion/myPromotionStore';
import styles from './myIncome.module.less'; // 修改为模块化样式

import { Button, DatePicker, Price } from '@nutui/nutui-react-taro';
import { Text } from '@tarojs/components';
import clsx from 'clsx';
import { toJS } from 'mobx';
import MyEmpty from 'src/components/MyEmpty/MyEmpty';
import MyScrollView from 'src/components/MyScrollView/MyScrollView';
import myIncomeStore from './myIncomeStore';

// 我的收益
const MyIncome = observer(() => {
    const [showDatePicker, setShowDatePicker] = useState(false);

    const incomeList = toJS(myIncomeStore.incomeList);

    const { year, month } = myIncomeStore;

    useEffect(() => {
        myIncomeStore.getNextIncome(true);
    }, []);

    useDidShow(() => {
        // 页面显示时，重新获取推广码和收益数据
        myPromotionStore.queryUserIncomeMap(); // 获取用户收益映射信息
    });

    return (
        <PageLayer
            showBack
            title='我的收益'
            className={styles.myIncome}
            hasTabBar={false}
        >

            {/* 收益记录 */}
            <View className={styles.statsCard}>
                <View className={styles.statItem}>
                    <View className={styles.statValue}>¥{myPromotionStore.incomeMoney}</View>
                    <View className={styles.statLabel}>当前收益金额</View>
                </View>
                <View className={styles.statItem}                >
                    <View className={styles.statValue}>¥{myPromotionStore.unfinishedMoney}</View>
                    <View className={styles.statLabel}>未完成收益金额</View>
                </View>
                <View className={styles.statItem}                >
                    <View className={styles.statValue}>¥{myPromotionStore.yesterdayMoney}</View>
                    <View className={styles.statLabel}>昨日收益金额</View>
                </View>
            </View>

            {/* 收支明细标题和Tab切换 */}
            <View className={styles.sectionHeader}>
                <View className={styles.sectionTitle}>收益记录</View>
                <View
                    className={styles.datePicker}
                    onClick={() => setShowDatePicker(true)}
                >
                    <Button type="primary" size="small" >{year && month ? `${year}年${month}月` : `选择日期`}</Button>
                    <DatePicker
                        title="日期选择"
                        type='year-month'
                        visible={showDatePicker}
                        pickerProps={{
                            popupProps: { zIndex: 1220 },
                        }}
                        startDate={new Date(2025, 0, 1)}
                        endDate={new Date()}
                        defaultValue={new Date()}
                        showChinese
                        onCancel={() => setShowDatePicker(false)}
                        onConfirm={(options, values) => {
                            const [year, month] = values as Array<number>;
                            myIncomeStore.setDate(year, month);
                            setShowDatePicker(false);
                        }}
                    />
                </View>
            </View>

            {/* 收支明细列表 */}
            <View className={styles.incomeList}>
                {
                    incomeList.length > 0 &&
                    <MyScrollView
                        style={{
                            height: "100%"
                        }}
                        onScrollBottom={() => {
                            myIncomeStore.getNextIncome();
                        }}
                    >
                        {
                            incomeList.map((item, i) => {
                                return (
                                    <View key={item.id} className={styles.transactionItem}>
                                        <View className={styles.transactionHeader}>
                                            <View className={`${styles.fundTypeTag} ${styles[item.fundType.toLowerCase()]}`}>
                                                {{
                                                    'PLACE_ORDER': '下单收益',
                                                    'FIRST_PROMOTION': '一级推广',
                                                    'SECOND_PROMOTION': '二级推广'
                                                }[item.fundType]}
                                            </View>
                                            <Price
                                                price={item.fundPrice}
                                                symbol="¥"
                                                size="normal"
                                                thousands
                                                className={styles.orderPrice}
                                                style={{ color: '#FF4D4F' }}
                                                digits={2}
                                            />
                                        </View>
                                        <View className={styles.transactionDetails}>
                                            <View className={styles.detailRow}>
                                                <Text>订单号: </Text>
                                                <Text>{item.orderCodeMain}</Text>
                                            </View>
                                            <View className={styles.detailRow}>
                                                <Text>收益比例: </Text>
                                                <Text>{item.fundRate}%</Text>
                                            </View>
                                            <View className={styles.detailRow}>
                                                <Text>订单金额: </Text>
                                                <Text className={styles.incomeAmount}>¥{item.orderPrice.toFixed(2)}</Text>
                                            </View>
                                        </View>
                                        <View className={styles.transactionFooter}>
                                            <View className={clsx(styles.status, styles[item.fundState.toLocaleLowerCase()])}>
                                                {{
                                                    'WAIT_SETTLE': '待结算',
                                                    'SETTLING': '结算中',
                                                    'SETTLED': '已完成',
                                                    'SETTLE_CANCEL': "结算取消"
                                                }[item.fundState]}
                                            </View>
                                            <View className={styles.timeInfo}>
                                                <Text>创建: {item.createTime}</Text>
                                            </View>
                                        </View>
                                    </View>
                                )
                            })
                        }
                    </MyScrollView>
                }

                {
                    incomeList.length === 0 &&
                    <MyEmpty
                        style={{
                            height: "100%"
                        }}
                        description="暂无收益记录"
                        actions={[
                            {
                                text: '去推广',
                                onClick: () => {
                                    Taro.navigateBack();
                                }
                            }
                        ]}
                    />
                }

            </View>

        </PageLayer>
    );
});

export default MyIncome;